<template>
  <el-dialog title="导入头像" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" :before-close="close">
    <div>
      <el-form ref="RefForm" :model="formData" label-width="100px" :validate-on-rule-change="false" status-icon>
        <el-form-item label="源目录" prop="srcFolder">
          <el-button @click="focusHandler">选择</el-button>
          <span>&nbsp;&nbsp;</span>
          {{ formData.srcFolder }}
          <input ref="inp" style="display: none;" type="file" webkitdirectory @change="changeHandler" />
        </el-form-item>
        <el-form-item label="指定目录" prop="targetFolder">
          <el-input v-model="formData.targetFolder" show-word-limit></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :loading="loadingSubmit" type="primary" @click="getDepartmentList">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import dialogEditMixin from '@/mixins/dialogEdit'
  import { CopyFiles } from '@/api/api'
  import { remote } from 'electron'
  export default {
    mixins: [dialogEditMixin],
    data() {
      return {
        imageUrl: '',
        apiKey: {
          search: '/Department/',
          add: '/Department',
          put: '/Department/'
        }
      }
    },
    methods: {
      changeHandler(event) {
        let str = null
        let ind = null
        if (!event) {
          console.log(event)
          this.$message.error('源目录不能为空文件夹！')
        } else {
          str = event.target.files[0].path
          ind = str.lastIndexOf('\\')
          this.formData.srcFolder = str.slice(0, ind)
        }

      },
      focusHandler() {
        this.$refs.inp.click()
      },
      resetFormData() {
        this.formData = {
          srcFolder: '', // 源目录
          targetFolder: '' // 指定目录
        }
      },
      async getDepartmentList() {
        this.loadingSubmit = true
        try {
          if (!this.formData.srcFolder) {
            this.$message.warning('源目录不能为空文件夹！')
            this.loadingSubmit = false
            return
          } else if (!this.formData.targetFolder) {
            this.$message.warning('指定目录不能为空！')
            this.loadingSubmit = false
            return
          }
          const result = await CopyFiles(this.formData)
          this.$message.success('导入成功！')
          this.dialogVisible = false
        } catch (err) {
          this.$message.error('导入失败！')
        }
        this.loadingSubmit = false
      }
    }
  }
</script>

<style lang="scss">
  .avatar-uploader {
    width: 100px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
  }
  .el-upload--text {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .avatar {
    width: 100%;
    height: 100%;
  }
</style>
